<template>
  <div class="sort-nav">
      <ul>
          <router-link :to="nav" v-for="(v,i) in this.$store.state.sort.onearr" :key="i" >
            <li>
              <img src="/image/Sort/0.png" alt="">
              <p>{{v.kinds}}</p>
            </li>
          </router-link>
      </ul>
      <div class="nav-rigth">
          <p>全部</p>
          <img src="image/Sort/全部.png" alt="">
      </div>
      <router-view/>
  </div>
</template>

<script>
export default {
    data(){
        return{
            nav:"/era"
        }
    },
}
</script>

<style scoped>
    .sort-nav{
        width: 100%;
        height: 0.9rem;
        /* background-color: aquamarine; */
        position: relative;
    }
    .sort-nav>ul{
        width: 100%;
        height: 100%;
        background-color: #faf6f7;
        display: flex;
        overflow-x: auto;
    }
    .sort-nav>ul>a{
        color: black;
        display: flex;
    }
    .sort-nav>ul>a>li{
        width: 0.6rem;
        height: 100%;
        /* background-color: blueviolet; */
        text-align: center;
        margin-right: 0.03rem;
    }
    .sort-nav>ul>a>li>img{
        width: 0.48rem;
        height: 0.48rem;
        margin-top: 0.1rem;
        margin-bottom: 0.03rem;
        margin-left: 0.05rem;
    }
    .sort-nav>ul>a>li>p{
        width: 0.6rem;
        height: 0.19rem;
        /* color: white; */
        /* background-color: #48b0ff; */
        border-radius: 100px;
        text-align: center;
        line-height: 0.19rem;
    }
    .nav-rigth{
        position: absolute;
        width: 0.36rem;
        height: 100%;
        background-color: #f7f7f7;
        top: 0;
        right: 0;
    }
    .nav-rigth>p{
        width: 0.11rem;
        height: 0.25rem;
        /* background-color: aqua; */
        font-size: 0.1rem;
        margin: 0.275rem 0.125rem 0.07rem 0.125rem;
    }
    .nav-rigth>img{
        width: 0.1rem;
        height: .1rem;
        margin: 0rem 0.125rem 0em 0.125rem;
    }
    .router-link-active>li>p{
        color: white;
        background-color: #48b0ff;
    }
    .router-link-active>li>img{
        border: 0.01rem solid #48b0ff;
        border-radius: 50%;
    }
</style>